#房颤
<template>
  <div id="analyse">
    <div class="right">
      <div class="top">
        <div id="case0"></div>
        <div id="case1"></div>
        <div id="column"></div>
        <div @click="fullScreen">全屏</div>
        <ecg-chart 
          ref = "ecgChart"
          :width-value="ecgWidthValue" 
          :height-value="ecgHeightValue"
        ></ecg-chart>
      </div>
    </div>
    <div class="left">
      <div class="top">
        <div id="scatterPlot"></div>
      </div>
      <div class="bottom">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in paneList" :label="item.label" :name="item.name" :key="index">
            <el-table
              :data="tableData"
              style="width: 342px">
              <el-table-column
                label="时间">
                <template slot-scope="scope">
                  <span>{{ scope.row.date.split(' ')[1] }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="持续时间">
                <template slot-scope="scope">
                  <span>{{ scope.row.continued }} S</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="AvgHR"
                label="平均心率">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

        <el-radio-group v-model="radio" @change="changeRadio">
          <el-radio :label="3">时间</el-radio>
          <el-radio :label="6">持续时间</el-radio>
          <el-radio :label="9">平均心率</el-radio>
        </el-radio-group>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="(() => dialogVisible = false)"
      title="显示心电图"
      width="100%"
      top="0"
      class="aaa">
      <div class="box">
        <div class="left">
          <div v-for="(item, index) in ecgList" :key="index" :id="&quot;dialogContainer&quot; + index" style="min-width: 310px;height: 100px;"></div>
        </div>
        <div class="right">
          <div class="content">
            <span class="title">心搏编辑</span>
            <el-radio-group v-model="heartRadio" class="radioBox">
              <el-radio :label="1">单个心搏</el-radio>
              <el-radio :label="2">批量编辑</el-radio>
              <el-radio :label="3">批量添加</el-radio>
              <el-radio :label="4">阵次模式</el-radio>
            </el-radio-group>
            <div>
              <el-button size="small" class="fullBtn">保存&更新</el-button>
            </div>
          </div>
          <div class="content">
            <span class="title">矩形测量</span>
            <el-radio-group v-model="measureRadio">
              <el-radio :label="1">矩形测量</el-radio>
              <el-radio :label="2">节律测量</el-radio>
            </el-radio-group>
          </div>
          <div class="content">
            <span class="title">片段图</span>
            <div><el-button size="small" class="fullBtn">保存片段图</el-button></div>
            <div><el-button size="small" class="fullBtn">打印片段图</el-button></div>
          </div>
          <div class="content">
            <span class="title">标准心电图</span>
            <div class="row">
              <span class="s-name">灵敏度</span>
              <el-select v-model="sensitivityValue" placeholder="请选择" size="small">
                <el-option
                  v-for="item in sensitivityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="row">
              <span class="s-name">纸速</span>
              <el-select v-model="speedValue" placeholder="请选择" size="small">
                <el-option
                  v-for="item in speedOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="row">
              <el-select v-model="leadValue" placeholder="请选择" size="small">
                <el-option
                  v-for="item in leadOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button size="small">选择导联</el-button>
            </div>
            <div class="row">
              <el-button size="small" @click="scan">开始扫描</el-button>
              <el-button size="small" >+</el-button>
              <el-button size="small">-</el-button>
            </div>
            <div class="row">
              <el-checkbox v-model="checked">导联反转显示</el-checkbox>
              <el-button size="small">选择导联</el-button>
            </div>
            <el-checkbox v-model="checked">显示背景格</el-checkbox>
          </div>
          <div class="content">
            <span class="title">趋势或缩略图</span>
            <el-radio-group v-model="trendRadio" class="radioBox">
              <el-radio :label="1">无</el-radio>
              <el-radio :label="2">心率趋势图</el-radio>
              <el-radio :label="3">显示缩略图</el-radio>
            </el-radio-group>
            <div>
              <el-button size="small" class="fullBtn">默认</el-button>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Papa from 'papaparse'
import * as samplesData from './../../../../public/js/ss'
var Highcharts = require('highcharts')
import EcgChart from '@/components/ecgChart'

export default {
  components: {
    EcgChart
  },
  data() {
    return {
      ecgWidthValue: undefined,
      ecgHeightValue: undefined,
      chart: undefined,
      dialogChart: undefined,
      sensitivityValue: '10mm/mv',
      speedValue: '25mm/s',
      leadValue: '十二导模式',
      sensitivityOptions: [{
        label: '5mm/mv',
        value: 0
      }, {
        label: '10mm/mv',
        value: 1
      }, {
        label: '20mm/mv',
        value: 2
      }, {
        label: '40mm/mv',
        value: 3
      }, {
        label: '80mm/mv',
        value: 4
      }],
      speedOptions: [{
        label: '12.5mm/s',
        value: 0
      }, {
        label: '25mm/s',
        value: 1
      }, {
        label: '50mm/s',
        value: 2
      }, {
        label: '100mm/s',
        value: 3
      }, {
        label: '150mm/s',
        value: 4
      }, {
        label: '200mm/s',
        value: 5
      }],
      leadOptions: [{
        label: '十二导模式',
        value: 0
      }, {
        label: '单导模式',
        value: 1
      }],
      checked: false,
      checkboxGroup1: [],
      dialogVisible: false,
      activeName: '1',
      heartRadio: 1,
      measureRadio: 1,
      trendRadio: 1,
      radio: 3,
      paneList: [{
        label: '房颤',
        name: '1'
      }, {
        label: '房扑',
        name: '2'
      }],
      tableData: [{
        date: '2014-04-23 19:52:46',
        continued: '20.31',
        AvgHR: 76
      }, {
        date: '2014-04-23 19:52:45',
        continued: '31.23',
        AvgHR: 89
      }, {
        date: '2014-04-23 19:52:44',
        continued: '16.31',
        AvgHR: 11
      }, {
        date: '2014-04-24 06:52:46',
        continued: '8.31',
        AvgHR: 22
      }],
      options: [{
        label: 'I',
        value: 0
      }, {
        label: 'II',
        value: 1
      }, {
        label: 'III',
        value: 2
      }, {
        label: 'aVR',
        value: 3
      }, {
        label: 'aVL',
        value: 4
      }, {
        label: 'aVF',
        value: 5
      }, {
        label: 'V1',
        value: 6
      }, {
        label: 'V2',
        value: 7
      }, {
        label: 'V3',
        value: 8
      }, {
        label: 'V4',
        value: 9
      }, {
        label: 'V5',
        value: 10
      }, {
        label: 'V6',
        value: 11
      }],

      list: [],
      list1: [],
      list2: [],
      ecgList: [{
        time: '10:48:41',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:48:55',
        name: 'aVF',
        data: this.list
      }, {
        time: '10:49:09',
        name: 'aVF',
        data: this.list
      }],
      fecg_data: []
    }
  },
  created() {
    this.getData()
    this.$nextTick(() => {
      this.createCaseChart('case0')
      this.createCaseChart('case1')
      this.createColumnChart()
      this.createScatterPlotChart()
      this.ecgWidthValue = window.innerWidth - 10
    })
  },
  methods: {
    scan() {
      const fecg_data = this.fecg_data
      const that = this
      for (let i = 600; i < fecg_data.length - 1; i++) {
        // await sleep(0.001)
        // var data2 = this.state.lineData
        this.list2.unshift(fecg_data[i])
        this.list2.splice(-1, 1)
        this.dialogChart.update({
          series: [{
            data: (function() {
              const value = that.list2
              var data = []

              for (let i = 0; i < value.length - 1; i += 1) {
                data.push({
                  x: value[i][0],
                  y: value[i][1]
                })
              }
              return data
            }())
          }]
        })
      }
      console.log('2')
    },
    fullScreen() {
      console.log('1')
      this.dialogVisible = true
      this.$nextTick(() => {
        this.ecgList.forEach((item, index) => {
          this.createDialogChart('dialogContainer', item, index)
        })
      })
    },
    changeRadio(value) {
      console.log(value)
      switch (value) {
        case 3:
          this.tableData.sort((a, b) => {
            a = +new Date(a.date)
            b = +new Date(b.date)
            return a - b
          })
          break
        case 6:
          this.tableData.sort((a, b) => {
            return a.continued - b.continued
          })
          break
        case 9:
          this.tableData.sort((a, b) => {
            return a.AvgHR - b.AvgHR
          })
          break
      }
            
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    createChart(value, item, index) {
      const that = this
      const widthValue = (window.innerWidth) - 10
      require('highcharts/modules/data')(Highcharts)
      Highcharts.chart(`${value}${index}`, {
        chart: {
          type: 'spline',
          width: widthValue,
          height: 100,
          backgroundColor: '#FFF'
        },
        credits: {
          enabled: false
        },
        title: {
          text: item.time,
          align: 'left',
          floating: true,
          y: 0,
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          text: item.name,
          align: 'left',
          y: 20,
          floating: true
        },
        yAxis: {
          labels: {
            enabled: false
          },
          tickPositions: [-1, -0.5, 0, 0.5, 1],
          title: {
            enabled: false
          },
          gridLineWidth: 0,
          max: 1
        },
        xAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0, 
          lineWidth: 0,
          gridLineWidth: 0
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          series: {
            lineWidth: 1
          }
        },
        series: [{
          name: 'I',
          turboThreshold: 200000,
          marker: {
            enabled: false
          },
          data: (function() {
            const value = that.list
            var data = []

            for (let i = 0; i < value.length - 1; i += 1) {
              data.push({
                x: value[i][0],
                y: value[i][1]
              })
            }
            return data
          }()),
          zoneAxis: 'x',
          zones: [{
            value: 100,
            color: '#7cb5ec'
          }, {
            value: 300,
            color: '#ff0000'
            // dashStyle: 'dot'
          }]
        }]
      })
    },
    createDialogChart(value, item, index) {
      const that = this
      const widthValue = (window.innerWidth) - 10
      require('highcharts/modules/data')(Highcharts)
      this.dialogChart = Highcharts.chart(`${value}${index}`, {
        chart: {
          type: 'spline',
          width: widthValue,
          height: 100,
          backgroundColor: '#E7F2FF'
          // events: {
          //     load: function () {
          //         // debugger
                            
          //         // let fecg_data = this.fecg_data
          //         // const that = this
          //         // for(let i = 600; i < fecg_data.length - 1; i++) {
          //             // await sleep(0.001)
          //             // var data2 = this.state.lineData
          //             // this.list2.unshift(fecg_data[i])
          //             // this.list2.splice(-1,1)
          //             // this.dialogChart.update({
          //             //     series: [{
          //             //         data: (function () {
          //             //             let value = that.list2;
          //             //             let data = [], i;

          //             //             for (i = 0; i < value.length - 1; i += 1) {
          //             //                 data.push({
          //             //                     x: value[i][0],
          //             //                     y: value[i][1]
          //             //                 });
          //             //             }
          //             //             return data;
          //             //         }())
          //             //     }]
          //             // });
          //         // }

          //         // set up the updating of the chart each second
          //         // var series = this.series[0];
          //         // setInterval(function () {
          //         //     var x = this.fecg_data[i][0], // current time
          //         //         y = this.fecg_data[i][i];
          //         //     series.addPoint([x, y], true, true);
          //         // }, 1000);
          //         // var series = this.series[0];
          //         // setInterval(function () {
          //         //     var x = (new Date()).getTime(), // current time
          //         //         y = Math.random();
          //         //     series.addPoint([x, y], true, true);
          //         // }, 1000);
          //     }
          // }
        },
        credits: {
          enabled: false
        },
        title: {
          text: item.time,
          align: 'left',
          floating: true,
          y: 0,
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          text: item.name,
          align: 'left',
          y: 20,
          floating: true
        },
        yAxis: {
          labels: {
            enabled: false
          },
          tickPositions: [-1, -0.5, 0, 0.5, 1],
          title: {
            enabled: false
          },
          gridLineWidth: 0,
          max: 1
        },
        xAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0, 
          lineWidth: 0,
          gridLineWidth: 0
        },
        legend: {
          enabled: false
        },
        series: [{
          name: 'I',
          turboThreshold: 200000,
          marker: {
            enabled: false
          },
          data: (function() {
            const value = that.list1
            var data = []

            for (let i = 0; i < value.length - 1; i += 1) {
              data.push({
                x: value[i][0],
                y: value[i][1]
              })
            }
            return data
          }()),
          zoneAxis: 'x',
          zones: [{
            value: 100,
            color: '#7cb5ec'
          }, {
            value: 300,
            color: '#ff0000'
            // dashStyle: 'dot'
          }]
        }]
      })
    },
    getData() {
      const data = Papa.parse(samplesData.samplesData).data
      var fecg_data = []
      for (var i = 2; i < data.length - 1; i++) {
        var item = data[i]
        var arr = []
        arr[0] = item[0].substring(0)
        arr[1] = item[1].substring(0)
        fecg_data[i] = arr
      }

      for (let k = 4; k < fecg_data.length - 1; k++) {
        var time = fecg_data[k]
        var time1 = time[0].trim().substring(3)
        var new_time = time1.split('.')
        fecg_data[k][0] = parseInt(new_time[0]) * 1000 + parseInt(new_time[1])
        fecg_data[k][1] = Number(fecg_data[k][1])
      }
      // console.log(fecg_data)
      this.fecg_data = fecg_data
      this.list = fecg_data.slice(4, fecg_data.length - 2)
      this.list1 = fecg_data.slice(4, 600)
      this.list2 = fecg_data.slice(4, 20)
    },
    createColumnChart() {
      Highcharts.chart('column', {
        chart: {
          type: 'column',
          height: 200
        },
        title: {
          text: 'Monthly Average Rainfall'
        },
        subtitle: {
          text: 'Source: WorldClimate.com'
        },
        xAxis: {
          // categories: [
          //     'Jan',
          //     'Feb',
          //     'Mar',
          //     'Apr',
          //     'May',
          //     'Jun',
          //     'Jul',
          //     'Aug',
          //     'Sep',
          //     'Oct',
          //     'Nov',
          //     'Dec'
          // ],
          // crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Rainfall (mm)'
          }
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        },
        series: [{
          name: 'Tokyo',
          data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
      })
    },
    createScatterPlotChart() {
      require('highcharts/modules/data')(Highcharts)
      Highcharts.chart('scatterPlot', {
        chart: {
          type: 'scatter',
          zoomType: 'xy'
        },
        credits: {
          enabled: false
        },
        title: {
          text: 'RR(ms)',
          align: 'left',
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          enabled: false
        },
        yAxis: {
          title: {
            enabled: false
          }
        },
        xAxis: {
          title: {
            enabled: true,
            text: 'Height (cm)'
          },
          startOnTick: true,
          endOnTick: true,
          showLastLabel: true
        },
        legend: {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'top',
          x: 100,
          y: 70,
          floating: true,
          backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
          borderWidth: 1
        },
        plotOptions: {
          scatter: {
            marker: {
              radius: 5,
              states: {
                hover: {
                  enabled: true,
                  lineColor: 'rgb(100,100,100)'
                }
              }
            },
            states: {
              hover: {
                marker: {
                  enabled: false
                }
              }
            },
            tooltip: {
              headerFormat: '<b>{series.name}</b><br>',
              pointFormat: '{point.x} cm, {point.y} kg'
            }
          }
        },
        series: [{
          name: 'Female',
          color: 'rgba(223, 83, 83, .5)',
          data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
            [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
            [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
            [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
            [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
            [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
            [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
            [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
            [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
            [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
            [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
            [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
            [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
            [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
            [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
            [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
            [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
            [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
            [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
            [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
            [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
            [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
            [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
            [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
            [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
            [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
            [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
            [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
            [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
            [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
            [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
            [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
            [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
            [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
            [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
            [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
            [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
            [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
            [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
            [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
            [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
            [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
            [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
            [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
            [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
            [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
            [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
            [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
            [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
            [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
            [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
            [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]

        }, {
          name: 'Male',
          color: 'rgba(119, 152, 191, .5)',
          data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
            [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
            [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
            [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
            [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
            [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
            [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
            [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
            [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
            [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
            [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
            [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
            [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
            [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
            [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
            [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
            [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
            [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
            [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
            [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
            [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
            [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
            [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
            [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
            [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
            [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
            [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
            [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
            [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
            [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
            [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
            [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
            [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
            [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
            [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
            [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
            [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
            [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
            [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
            [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
            [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
            [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
            [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
            [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
            [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
            [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
            [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
            [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
            [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
            [180.3, 83.2], [180.3, 83.2]]
        }]
      })
    },
    createCaseChart(res) {
      require('highcharts/modules/data')(Highcharts)
      Highcharts.chart(res, {
        chart: {
          type: 'scatter',
          zoomType: 'xy',
          height: 200
        },
        credits: {
          enabled: false
        },
        title: {
          text: 'RR(ms)',
          align: 'left',
          // floating: true,
          // y: 0,
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          enabled: false
        },
        yAxis: {
          title: {
            text: 'Weight (kg)'
          }
        },
        xAxis: {
          title: {
            enabled: true,
            text: 'Height (cm)'
          },
          startOnTick: true,
          endOnTick: true,
          showLastLabel: true
        },
        legend: {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'top',
          x: 100,
          y: 70,
          floating: true,
          backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
          borderWidth: 1
        },
        plotOptions: {
          scatter: {
            marker: {
              radius: 5,
              states: {
                hover: {
                  enabled: true,
                  lineColor: 'rgb(100,100,100)'
                }
              }
            },
            states: {
              hover: {
                marker: {
                  enabled: false
                }
              }
            },
            tooltip: {
              headerFormat: '<b>{series.name}</b><br>',
              pointFormat: '{point.x} cm, {point.y} kg'
            }
          }
        },
        series: [{
          name: 'Female',
          color: 'rgba(223, 83, 83, .5)',
          data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
            [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
            [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
            [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
            [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
            [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
            [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
            [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
            [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
            [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
            [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
            [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
            [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
            [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
            [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
            [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
            [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
            [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
            [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
            [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
            [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
            [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
            [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
            [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
            [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
            [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
            [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
            [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
            [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
            [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
            [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
            [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
            [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
            [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
            [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
            [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
            [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
            [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
            [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
            [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
            [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
            [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
            [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
            [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
            [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
            [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
            [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
            [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
            [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
            [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
            [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
            [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]

        }, {
          name: 'Male',
          color: 'rgba(119, 152, 191, .5)',
          data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
            [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
            [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
            [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
            [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
            [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
            [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
            [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
            [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
            [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
            [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
            [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
            [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
            [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
            [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
            [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
            [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
            [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
            [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
            [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
            [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
            [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
            [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
            [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
            [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
            [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
            [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
            [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
            [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
            [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
            [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
            [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
            [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
            [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
            [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
            [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
            [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
            [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
            [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
            [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
            [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
            [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
            [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
            [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
            [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
            [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
            [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
            [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
            [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
            [180.3, 83.2], [180.3, 83.2]]
        }]
      })
    }
  }
}

</script>

<style lang="scss" scoped>
    #analyse {
        width: 100%;
        // height: 100%;
        display: flex;
        .copy {
            border: 1px solid #c0c4cc;
            padding: 10px;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .left {
            // flex: 0 0 20%;
            width: 364px;
            border: 1px solid;
            position: relative;
            .bg {
                position: absolute;
                top: 10px;
                left: 51px;
                width: 300px;
                height: 470px;
            }
            .plotLineText {
                position: absolute;
                color: red;
                top: 480px;
            }
            .bottom {
                padding: 10px;
                .title {
                    font-size: 16px;
                    color: #333;
                    display: block;
                    font-weight: 600;
                }
                .name {
                    font-size: 14px;
                    color: #4A4A4A;
                    text-align: left;
                    width: 120px;
                    display: inline-block;
                }
                // .copy {
                //     border: 1px solid #c0c4cc;
                //     padding: 10px;
                //     border-radius: 6px;
                //     margin-bottom: 10px;
                // }
                .first {
                    .el-select {
                        width: 100px;
                    }
                }
                .second {
                    .list {
                        span {
                            font-size: 14px;
                            color: #4A4A4A;
                        }
                        .el-input {
                            width: 100px;
                        }
                        .unit {
                            margin-left: 10px;
                        }
                    }
                }
                .third-bottom {
                    display: flex;
                    justify-content: space-between;
                    .otherBtn {
                        width: 220px;
                    }
                    .startAnalyse {
                        height: 158px;
                    }
                }
            }
            
            .scaleList {
                display: flex;
                img {
                    width: 36px;
                    height: 36px;
                }
            }
            .stepList {
                position: absolute;
                top: 0;
                right: 0;
                display: flex;
                img {
                    width: 36px;
                    height: 36px;
                }
            }
        }
        .right {
            width: calc( 100% - 364px);
            border: 1px solid;
            .bottom {
                border: 1px solid;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
            }
        }
        .aaa {
            height: 100vh;
            .box {
                display: flex;
                .left {
                    flex: 1;
                }
                .right {
                    flex: 0 0 210px;
                    .content {
                        padding: 10px;
                        .title {
                            font-size: 15px;
                            color: #333;
                            display: block;
                            font-weight: 600;
                            margin-bottom: 10px;
                        }
                        .radioBox {
                            border: 1px solid #ccc;
                            padding: 10px;
                            margin-bottom: 10px;
                            border-radius: 6px;
                        }
                        .row {
                            margin-top: 8px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .s-name {
                                width: 60px;
                                display: inline-block;
                                // text-align: right;
                                padding-right: 10px;

                            }
                        }
                        .el-select {
                            width: 100px;
                        }
                        .el-checkbox {
                            margin-right: 0;
                        }
                        .fullBtn {
                            width: 188px;
                        }
                    }
                }
            }
        }
        .el-dialog {
            height: 100vh;
            .five {
                .five-list-box {
                    display: flex;
                    flex-wrap: wrap;
                    .five-list {
                        margin-right: 10px;
                        .name {
                            font-size: 14px;
                            color: #4A4A4A;
                            text-align: left;
                            width: 120px;
                            display: inline-block;
                        }
                        .el-input {
                            width: 100px;
                        }
                    }
                }
            }
            .list {
                margin-top: 10px;
                .name {
                    font-size: 14px;
                    color: #4A4A4A;
                    text-align: left;
                    width: 100px;
                    display: inline-block;
                }
                .el-select {
                    width: 115px;
                }
            }
        }
    }
</style>



